<template>
  <div class="message">
    <nav-bar>
      <img
        src="../../assets/img/navbar/ic_title_close.png"
        slot="left"
        class="left"
        alt=""
        @click="$router.back()"
      />
      <span slot="center">消息</span>
    </nav-bar>
    <div class="content_box" ref="viewhome">
      <ul class="notice_box">
        <li
          class="notice_list"
          v-for="(item, index) in list"
          :key="index"
          @click="noticeClick(index)"
        >
          <span class="notice_title">{{ item.title }}</span>
          <div class="notice_time_back">
            <span class="notice_date">{{ item.fabutime | fnDate }}</span>
            <img
              src="../../assets/img/apply/ic_game_recommend_arrow_right.png"
              alt=""
              class="notice_right"
            />
          </div>
        </li>
      </ul>
      <img
        class="img_empty"
        src="../../assets/img/apply/ic_empty_footer.png"
        alt=""
      />
      <back-top :scrollTop="scTop" @back-top="backTop"/>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue"
import { getNoticeList } from '../../network/home'
import mixinBackTop from '../../mixins/common'
import BackTop from '../../components/common/backTop/BackTop.vue';

export default {
  name: 'Message',
  mixins: [mixinBackTop],
  components: { NavBar, BackTop },
  data() {
    return {
      list: [],
      scrollTop: '',
    };
  },
  beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.querySelector('.content_box').scrollTop
    console.log(this.scrollTop)
    next()
  },
  activated() {
    const top = document.querySelector('.content_box')
    top.scrollTo(0, this.scrollTop);
  },
  created() {
    this.getNotice();
  },
  methods: {
    getNotice() {
      getNoticeList().then((res) => {
        if (res.state === "ok") {
          console.log(res.data);
          this.list = res.data;
        } else if (res.msg === "no_login") {
          this.$router.replace("/login");
        }
      });
    },
    noticeClick(index) {
      this.$router.push({
        path: "/notice_detail",
        query: {
          url: this.list[index].url,
          title1: this.list[index].title,
        },
      });
    },
  },
};
</script>

<style scoped>
.left {
  width: 44px;
  height: 44px;
}

.content_box {
  width: 750px;
  margin-top: 88px;
  margin-left: 50%;
  transform: translateX(-50%);
  background: #fff;
}

.notice_box {
  width: 750px;
}

.notice_list {
  height: 100px;
  padding: 0 35px;
  line-height: 100px;
  font-size: 30px;
  border-bottom: 2px solid #eee;
  display: flex;
  justify-content: space-between;
}

.notice_title {
  display: block;
  width: 470px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.notice_date {
  font-size: 22px;
  color: #999;
}

.notice_right {
  display: block;
  width: 18px;
  height: 30px;
  margin-left: 30px;
}

.notice_time_back {
  display: flex;
  align-items: center;
}

.img_empty {
  display: block;
  width: 750px;
  padding: 50px 0 150px;
}
</style>